<template>
	<div class="label_wrapper">
		<sw-multi-mode class="content" :data="catalogListData">
			<template slot="button" slot-scope="{ checked }">
				<el-button size="small" type="text" icon="el-icon-rank" @click="handleMoveToCatalog(checked)">移动到</el-button>
				<el-button size="small" type="text" icon="el-icon-delete">批量删除</el-button>
			</template>
			<template slot="block" slot-scope="{ data }">
				<catalog-item :data="data" @handle="handleCatalogOper"></catalog-item>
			</template>
		</sw-multi-mode>
	</div>
</template>

<script>
import catalogItem from './item';
import swMultiMode from '@/components/swMultiMode';
import { getCatalogList } from '@/api/data/tbNetDefCatalog';
export default {
	components: { catalogItem, swMultiMode },
	data() {
		return {
			queryData: {
				page: 1,
				limit: 10
			},
			dataCount: 0,
			catalogListData: []
		};
	},
	filters: {
		firstChar(input) {
			return input.charAt(0);
		}
	},
	mounted() {
		this.getCatalogData();
	},
	methods: {
		//获取编目列表数据
		async getCatalogData() {
			let params = { ...this.queryData, king: '2' };
			let result = await getCatalogList(params).then((res) => res.data);
			this.loading = false;
			if (result.code == '0') {
				this.dataCount = parseInt(result.count);
				this.catalogListData = !result.data ? [] : result.data;
			}
		},

		//编目操作
		handleCatalogOper(type, data) {
			this.catalogData = { ...data };
			if (type === 'look') {
				this.detailDrawer = true;
			}
			if (type === 'edit') {
				this.formDialog = true;
			}
			if (type === 'move') {
				this.moveDialog = true;
			}
			if (type === 'refresh') {
				this.handleQueryCatalog();
			}
		},

		handleMoveToCatalog(data) {
			console.log(data);
		}
	}
};
</script>

<style lang="scss" scoped>
.label_wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px;
	box-sizing: border-box;
	.content {
		flex: 1;
		overflow: hidden;
	}
}
</style>
